<div class="grid-stack-item"
	:class="'grid-stack-item-' + widget.widget_type"
    :id="widget._id"
    :gs-id="widget._id"
    :gs-x="widget.position && widget.position[0]"
    :gs-y="widget.position && widget.position[1]"
    :gs-w="validateWidgetSize(settings, widget, 'w')"
    :gs-h="validateWidgetSize(settings, widget, 'h')"
    :gs-min-w="validateWidgetDimension(settings, widget, 'w')"
    :gs-min-h="validateWidgetDimension(settings, widget, 'h')"
    @click="settings.grid.onClick && settings.grid.onClick(widget)">

    <!--
        These properties set here to the grid stack item are added during the first
        load. The are not updated even if the values change from the subsequent refreshes.
        To update them we need to run updateGridWidget method i.e. update them via grid
        instance.

        For this we use the validateWidgets method.
    -->

    <div class="grid-stack-item-content bu-p-4">
        <widget-disabled v-if="isWidgetDisabled(widget)" :widget="widget">
            <template v-slot:action v-if="canUpdateGrid">
                <div class="bu-level-item">
                    <cly-more-options @command="$emit('command', $event, widget)">
                        <el-dropdown-item command="delete">{{i18n('common.delete')}}</el-dropdown-item>
                    </cly-more-options>
                </div>
            </template>
        </widget-disabled>
        <widget-invalid v-else-if="!loading && isWidgetInvalid(widget)" :widget="widget">
            <template v-slot:action v-if="canUpdateGrid && settings.isAllowed">
                <div class="bu-level-item">
                    <cly-more-options @command="$emit('command', $event, widget)">
                        <el-dropdown-item command="delete">{{i18n('common.delete')}}</el-dropdown-item>
                    </cly-more-options>
                </div>
            </template>
        </widget-invalid>
        <component v-else :is="settings.grid.component" @command="$emit('command', $event, widget)" :is-allowed="canUpdateGrid && settings.isAllowed" :data="widget" :loading="loading">
            <template v-slot:action v-if="canUpdateGrid && settings.isAllowed">
                <div class="bu-level-item">
                    <cly-more-options @command="$emit('command', $event, widget)">
                        <el-dropdown-item class="dashboard-more-options" command="edit">{{i18n('common.edit')}}</el-dropdown-item>
                        <el-dropdown-item class="dashboard-more-options" command="delete">{{i18n('common.delete')}}</el-dropdown-item>
                    </cly-more-options>
                </div>
            </template>
        </component>
    </div>

</div>